<template>
	<div id="fujin">
		<form action="/" class="theme-background" style="padding: 0.5rem;padding-bottom: 0.2rem;">
			<van-search v-model="searchContent" placeholder="请输入充电站名称" show-action @search="onSearch" left-icon="">
				<div slot="action" @click="onSearch"><i class="van-icon icon iconfont icon-sousuo"></i></div>
			</van-search>
		</form>
		<van-tabs v-model="active" animated>
			<van-tab :title="'电瓶车'"></van-tab>
			<van-tab :title="'洗车机'"></van-tab>
		</van-tabs>
		<div id="map" class="page-location-map"></div>
		<!-- <van-dialog v-model="show" title="标题" show-cancel-button><img src="https://img.yzcdn.cn/vant/apple-3.jpg" /></van-dialog> -->
		<van-loading class="theme-colors" v-if="loading" />
			<w-tabbar @change="onChange"></w-tabbar>
	</div>
</template>

<script>
export default {
	data() {
		return {
			searchContent: '',
			active: '',
			show: true,
			list: [{}],
			loading: false
		};
	},
	methods: {
		adMap() {
			const t = this;
			let map = new AMap.Map('map', {
				resizeEnable: true
			});
			var options = {
				enableHighAccuracy: true, //是否使用高精度定位，默认:true
				timeout: 10000, //超过10秒后停止定位，默认：5s
				buttonPosition: 'RB', //定位按钮的停靠位置
				buttonOffset: new AMap.Pixel(10, 20), //定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
				zoomToAccuracy: true //定位成功后是否自动调整地图视野到定位点
			};
			AMap.plugin(['AMap.Geolocation'], function() {
				var geolocation = new AMap.Geolocation(options);
				map.addControl(geolocation);
				geolocation.getCurrentPosition(function(status, result) {
					if (status == 'complete') {
						alert(result.position)
					} else {
							alert('定位失败')
					}
				});
			});
		},
		
		
		onSearch() {},
		onChange() {}
	},
	mounted() {
		setTimeout(() => {
			this.adMap();
		}, 1000);
	}
};
</script>

<style lang="scss" scoped>
#fujin {
	height: 100%;
	position: absolute;
	width: 100%;
	overflow: hidden;
}
#map {
	width: 100%;
	height: 100%;
	overflow: hidden;
	margin: 0;
	position: absolute;
}
.van-search {
	border-radius: 8px;
	padding: 8px 12px;
}

.van-search /deep/ {
	.van-search__content {
		background: none;
	}
	van-search__action {
		padding: 0 18px;
	}
}

.van-tabs /deep/ {
	.van-tabs__nav {
		background: #3b80ea;
	}
	.van-tab--active,
	.van-tab {
		color: #fff;
	}
	.van-tabs__line {
		background-color: #fff;
	}
}
</style>
